<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../jQuery/jquery-3.7.1.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.news {
				display: flex;
				height: 120px;
				width: 600px;
				margin: 0 auto;
				padding: 20px 0;
				cursor: pointer;
			}

			.news .left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-right: 10px;
			}

			.news .left .title {
				font-size: 20px;
			}

			.news .left .info {
				color: #999999;
			}

			.news .left .info span {
				margin-right: 20px;
			}

			.news .right {
				width: 160px;
				height: 120px;
			}

			.news .right img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		</style>
		<script>
			// 在这里能不能通过DOM或$获取ul对象
			// 文档的初始化
			$(document).ready(function() {
				// 需要等待页面加载完成才会执行
				$.ajax({
					url: 'http://hmajax.itheima.net/api/news',
					type: 'GET', //get/post/put/delete
					success: function(result) {
						console.log(result.data) // 数组，每一个数组元素
						addLi(result.data)
					},
					error: function(error) {
						alert('请求失败')
					}
				})
			})
			
			function addLi(arr) {
				if(arr && arr.length > 0) {
					let ul_html = ''
					for(let i = 0; i < arr.length; i ++) {
						let obj = arr[i]
						// 每一次循环构造一个li
						ul_html += "<li class='news'>"
						ul_html += "<div class='left'>"
						ul_html += "<div class='title'>" 
								+ obj.title + "</div>"
						ul_html += "<div class='info'>"
						ul_html += "<span>" + obj.source + "</span>"
						ul_html += "<span>" + obj.time + "</span>"
						ul_html += "</div>"
						ul_html += "</div>"
						ul_html += "<div class='right'>"
						ul_html += "<img src='" 
								+ obj.img 
								+ "' alt=''>"
						ul_html += "</div>"	
						ul_html += "</li>"
					}
					// 替换ul的html
					$('ul:first').html(ul_html)
				}
			}
		</script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 这部分数据需要使用js替换 -->
				<li class="news">
					<div class="left">
						<div class="title">5G商用在即，三大运营商营收持续下降</div>
						<div class="info">
							<span>新京报经济新闻</span>
							<span>2222-10-28 11:50:28</span>
						</div>
					</div>
					<div class="right">
						<img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>